<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <one :num="num" :set-num = "setNum"></one>
    <two :num="num" @set-num = "setNum"></two>
    <three :num="num" @update:num = "setNum"></three>
    <four :num="num" @update:num = "n=>num=n"></four>
    <!--  four的语法糖  -->
    <four :num.sync="num"></four>
</div>
</body>
<script>
    // 常见的场景：父组件向子组件传递了某一个参数，需要在子组件当中修改父组件传递过来的参数
    // :num.sync="num"做了两件事：
    // 1- 传递了属性num
    // 2- 指定了一个名字为update:num的自定义事件，对应的事件处理函数 n=>num=n;
	new Vue({
		el: "#root",
        data:{
			num:100
        },
        methods:{
			setNum(num){
				this.num = num;
            }
        },
        components:{
			One:{
				props:["num","setNum"],
				template:(`
				    <button @click="setNum(1)">{{num}}</button>
				`)
            },
            Two:{
				props:["num"],
                template:(`
                    <button @click="$emit('set-num',2)">{{num}}</button>
                `)
            },
			Three:{
				props:["num"],
				template:(`
                    <button @click="$emit('update:num',2)">{{num}}</button>
                `)
			},
			Four:{
				props:["num"],
				template:(`
                    <button @click="$emit('update:num',300)">{{num}}</button>
                `)
			}
        }
	})
</script>
</html>